<template>
	<div class="completeorder">
		<back></back>
		<noorder v-show="isShow"></noorder>
		<div class="product" v-for="(item,index) in productlist">
		<div class="productlist">
		   <p class="title">{{title}}</p>
		   <div class="productInfomation" @click="goInformation(item)">
		     <div class="left">
		       <img :src="item.thumbnail" />
		     </div>    
		     <div class="right">
		     	   <p class="productname">{{item.productName}}</p>
		     	   <p><span>租赁押金</span>：<span class="deposit">￥{{item.deposit}}元</span></p>
		     	   <p v-if="!!item.favourableAmount"><span>预付租金</span>：<span class="deposit">￥{{item.favourableAmount}}元</span></p>
		     	   <p><span>租金</span>：<span class="deposit">￥{{item.rentAmountCost}}元</span></p>
		     	   <p><span>租赁天数</span>：<span class="rentDayCount">{{item.rentDayCount}}天</span></p>
					<!--<p><span>零售价</span>：<span class="price">￥{{item.price}}</span></p>-->
		     	   <!--<p class="shortDesc">{{item.shortDesc}}</p>-->
		     </div>		       
		   </div>
		   <div class="productcount">
		       <p v-if="!!item.rentAmountCost"><span >合计：</span><span>￥</span><span>{{item.rentAmountCost}}元</span></p>
		       <p v-else-if="!item.totalPay"><span >合计：</span><span>￥</span><span>{{item.totalPay}}元</span></p>
		   	   <p v-else> <span>合计：</span><span>￥</span><span>{{item.deposit}}元</span></p>
		   </div>		   			   
		</div>
		<!--<div class="actives" v-if="item.favourables !== undefined && item.favourables.length >0">
			<p @click="active">现在付款有优惠哦</p>
			<compeleteactive v-show="isModalShow" :activeData="item" @close="close"></compeleteactive>
		</div>-->
	</div>
	</div>
</template>

<script>
import noorder from '@/components/m-noorder/noorder'
import back from '@/components/m-back/back'
import compeleteactive from '@/components/m-active/compeleteactive'
	
	export default {
		name:'completeorder',
		components:{
			noorder,
			back,
			compeleteactive
		},
		data () {
			return {
				productlist:[],
				title:'',
				isShow:false,
				isModalShow:false
			}
		},
		mounted () {
			this.getPayList();
		},
		methods:{
			//获取订单列表
			getPayList(){
				this.title = this.$route.query.order_title;
				this.$http.get(this.$store.state.reqUrl + this.$route.query.interface_url,{
					params:{
						/*pageNum: 1,
					    pageSize: 10*/
					    statu:this.$route.query.statu
					}
				}).then(res => {
					if(res.status == 200) {
						if(res.data.list.length === 0){
					        this.isShow = true; 
						}else{
							this.productlist = res.data.list;
						}
					}
			    })
			},
		  //到详情页
		  goInformation (item) {
		  	 this.$router.push({
		  	 	path:'/completeorderinformation',
		  	 	query:{
		  	 		payNo_rentSerial:item.rentSerial,
		  	 		interface_url:this.$route.query.interface_url,
		  	 		style_title:this.$route.query.style_title,
					order_time:this.$route.query.order_time
		  	 	}
		  	 });
		  },	  
		  //提前付款
		  active () {
		  	 this.isModalShow = true
		  },
		 //关闭模态框
		   close (i) {
		   	 this.isModalShow = i
		   }
		}
	}
</script>

<style lang="less" scoped>
    .completeorder {
    	margin-top: 1.5rem;
    	width: 100%;
    	.product {
    		margin: 0 20px 20px 20px;
    		background: #FFFFFF;
    		border-radius: 28px;
    		font-size: 28px;
    		.productlist {
    			padding:20px 20px;
    			.title {
    				color: #FF0000;
    				text-align: right;
    			}
    			.productInfomation {
    				display: flex;
    				.left {
    					width: 120px;
    					height: 120px;
    					img {
    						width: 100%;
    						height: 100%;
    					}
    				}
    				.right {
    					flex: 1;
    					margin-left: 20px;
    					.productname{
    						font-size: 30px;
    						color: #000000;
    						font-weight: 800;
    					}
    					.deposit{
    						color: #FF0000;
    						font-size: 28px;
    					}
    					.price{
    						color: #FF0000;
    						font-size: 28px;
    					}
    					.rentDayCount{
    						color: #000000;
    					}
    					.shortDesc{
    						margin-top: 8px;
    						line-height: 30px;
    						font-size: 26px;
    					}
    				}
    			}
    			.productcount {
    				text-align: right;
    				margin-top: 20px;
    			}    			   			
    		}
    	}
    }
</style>